﻿<template>
  <div>
    <div class = "addColumn">
      <p @click = "handleAddOption()"> <i class = "iconfont icon-add"></i>添加模板事件或行为</p>
    </div>
    <el-table :data = 'currentPage.inherentEvents' style = "width:100%" max-height = 350 empty-text="暂无数据，请添加" border stripe>
      <el-table-column align = "center" prop = 'eventsType' label = '事件或行为类别' min-width = "140px" :render-header = 'handelHelp'
      label-class-name = "类型为行为时无需绑事件">
        <template slot-scope = "scope">
          <el-select v-model = "scope.row.eventsType" placeholder = '请选择' clearable filterable>
            <el-option-group label = '表格初始化/行事件'>
              <el-option value = 'initTable' label = '初始化表格事件'></el-option>
              <el-option value = 'deleteTable' label = '删除表格行事件(删除后不可恢复)'></el-option>
              <el-option value = 'removeTable' label = '移除表格行事件(删除后可恢复)'></el-option>
              <el-option value = 'recoverTable' label = '恢复表格行事件(执行移除表格行事件的数据)'></el-option>
              <el-option value = 'activeTable' label = '启用事件'></el-option>
              <el-option value = 'deactiveTable' label = '停用事件'></el-option>
            </el-option-group>
            <el-option-group label = '表格行行为(需指定弹窗页面)'>
              <el-option value = 'editTable' label = '编辑表格行行为'></el-option>
              <el-option value = 'showDetail' label = '查看表格行行为(查看详细)'></el-option>
            </el-option-group>
            <el-option-group label = '按钮事件'>
              <el-option value = 'searchInfo' label = '查询事件'></el-option>
              <el-option value = 'exportReport' label = '导出事件'></el-option>
              <el-option value = 'importReport' label = '导入事件'></el-option>
              <el-option value = 'extend_save' label = '保存事件'></el-option>
              <el-option value = 'extend_submit' label = '提交事件'></el-option>
              <el-option value = 'extend_pass' label = '通过事件'></el-option>
              <el-option value = 'extend_reject' label = '驳回事件'></el-option>
              <el-option value = 'extend_finish' label = '完成事件'></el-option>
              <el-option value = 'extend_stop' label = '终止事件'></el-option>
              <el-option value = 'submitDialogForm_add' label = '提交弹窗表单(新增)'></el-option>
              <el-option value = 'submitDialogForm_edit' label = '提交弹窗表单(编辑)'></el-option>
              <el-option value = 'submitForm_add' label = '提交表单(新增)'></el-option>
              <el-option value = 'submitForm_edit' label = '提交表单(编辑)'></el-option>
            </el-option-group>
            <el-option-group label = '按钮行为(需指定弹窗页面)'>
              <el-option value = 'addDialogForm' label = '打开弹窗行为'></el-option>
              <el-option value = 'resetDialogForm' label = '关闭弹窗行为'></el-option>
            </el-option-group>
          </el-select>
        </template>
      </el-table-column>
      <el-table-column align = "center" prop = 'relatedTag' label = '关联元素' show-overflow-tooltip min-width = "120px">
        <template slot-scope = "scope">
          <el-select v-model = "scope.row.relatedTag" placeholder = '请选择' :disabled = "!scope.row.eventsType">
            <el-option :label = "modelItem.name + '(' + modelItem.model + ')'" :value = 'modelItem.model' v-for = 'modelItem in allSingleModel' :key = 'modelItem.model'></el-option>
          </el-select>
        </template>
      </el-table-column>
      <el-table-column align = "center" label = "操作" width = "30">
        <template slot-scope = "scope">
          <el-button type = "text" size = "mini" @click = "handleOptionsRemove(scope.$index)" title = '移除'>
            <i class = "iconfont icon-shanchu"></i>
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  props: ['currentPage', 'allSingleModel'],
  methods: {
    // 表头的提示信息
    handelHelp (h, {column}) {
      if (column.labelClassName) {
        return (
          <el-tooltip effect="dark" placement="top">
            <div slot='content'>{column.labelClassName}</div>
            <span>{column.label}</span>
          </el-tooltip>
        )
      }
    },
    // 删除选项时
    handleOptionsRemove (index) {
      this.currentPage.inherentEvents.splice(index, 1)
    },
    // 新增选项时
    handleAddOption () {
      this.currentPage.inherentEvents.unshift({
        // 是否启用
        isActive: true,
        eventsNo: '',
        eventsType: '',
        relatedTag: '',
        dialogUid: '',
        // 固有事件默认为0，不可更改
        actionIndex: 0,
        inputDic: [],
        outputDic: [],
        // 表格右侧的按钮自定义时，可更改名称和icon
        selfName: '',
        selfIconName: 'icon-bianji',
        // 表格的翻页方式back,front
        pageType: 'back',
        // 初始化表格的固有过滤条件
        fixed_filter_express: '',
        // 初始化表格的排序条件
        fixed_orderby_express: '',
        // 初始化表格的自定义过滤条件
        other_condition_express: '',
        // 其它数据影响参数
        fixed_data_express: '',
        // 关联元数据表表达式
        ref_express: '',
        // 表格行事件的显示和隐藏条件
        row_express: ''
      })
    }
  }
}
</script>
